import React, { useCallback, useMemo, useState } from 'react';
import { View, ScrollView, Text } from '@ray-js/components';
import { useActions, useProps } from '@ray-js/panel-sdk';
import {
  Cell,
  CellGroup,
  Switch,
  BottomSheet,
  Icon,
  DialogInstance,
  Dialog,
  Stepper,
} from '@ray-js/smart-ui';
import { publishDps, router } from '@ray-js/ray';
import { useThrottleFn } from 'ahooks';

import Checkmark from '@tuya-miniapp/icons/dist/svg/Checkmark';

import { NavBarCustom } from '@/components/NavBarCustom';
import Strings from '@/i18n';
import styles from './index.module.less';

const option = [
  {
    label: Strings.getLang('level_1'),
    code: 'level_1',
  },
  {
    label: Strings.getLang('level_2'),
    code: 'level_2',
  },
  {
    label: Strings.getLang('level_3'),
    code: 'level_3',
  },
  {
    label: Strings.getLang('level_4'),
    code: 'level_4',
  },
  {
    label: Strings.getLang('level_5'),
    code: 'level_5',
  },
];

export default function Home() {
  const {
    kc_sd: kcSd,
    fj_ld: fjLd,
    ck_cb: ckCb,
    cxh_ms: cxhMs,
    fd_bj: fdBj,
    xy_tx: xyTx,
    yt_tx: ytTx,
    t_s: tS,
    control_back: controlBack,
    auto_power: autoPower,
    kc_fs: kcFs,
    xc_wt: xcWt,
    ckcb_ys: ckCbYs,
  } = useProps();
  const props = useProps();

  const [show, setShow] = useState(false);

  const [showNumber, setShowNumber] = useState(false);

  const [code, setCode] = useState('');

  const [list, setList] = useState([]);

  const [title, setTitle] = useState('');

  const onClose = () => {
    setShow(false);
  };

  const settingList = [
    {
      title: Strings.getLang('open_speed'), // 开窗速度
      code: 'kc_sd',
      type: 'Select',
      value: Strings.getLang(kcSd),
      option,
    },
    {
      title: Strings.getLang('prevent_block'), // 防夹
      code: 'fj_ld',
      label: Strings.getLang('prevent_block_tips'),
      type: 'Select',
      value: Strings.getLang(fjLd),

      option,
    },
    {
      title: Strings.getLang('open_direction'), // 开窗方向
      code: 'control_back',
      type: 'Select',
      // @ts-ignore
      value: Strings.getLang(`dir_${controlBack}`),
      option: [
        {
          label: Strings.getLang('dir_forward'),
          code: 'forward',
        },
        {
          label: Strings.getLang('dir_back'),
          code: 'back',
        },
      ],
    },
    {
      title: Strings.getLang('display'), // 显示
      code: 'kcFs',
      type: 'link',
      url: 'openType',
      value: Strings.getLang(kcFs),
    },
    {
      title: Strings.getLang('clear'), // 清除
      code: 'qc_xc',
      type: 'confirm',
      tips: Strings.getLang('clear_tips'),
    },
    {
      title: Strings.getLang('fine_tuning'), // 微调
      code: 'xc_wt',
      label: Strings.getLang('fine_tuning_tips'),
      type: 'Select',
      value: Strings.getLang(xcWt),
      option,
    },
    {
      title: Strings.getLang('lock'), // 锁
      code: 't_s',
      label: Strings.getLang('lock_tips'),
      type: 'Boolean',
      value: tS,
    },
    {
      title: Strings.getLang('rain_warning'), // 雨预警
      code: 'xy_tx',
      label: Strings.getLang('rain_warning_tips'),
      type: 'Boolean',
      value: xyTx,
    },
    {
      title: Strings.getLang('rain_stop'), // 雨停
      code: 'yt_tx',
      label: Strings.getLang('rain_stop_tips'),
      type: 'Boolean',
      value: ytTx,
    },
    {
      title: Strings.getLang('theft_alarm'), // 放盗
      code: 'fd_bj',
      label: Strings.getLang('theft_alarm_tips'),
      type: 'Boolean',
      // value: fdBj,
    },
    {
      title: Strings.getLang('hand_launch'), // 手动开窗
      code: 'auto_power',
      label: Strings.getLang('hand_launch_tips'),
      type: 'Boolean',
      value: autoPower,
    },
    {
      title: Strings.getLang('long_life'), // 长续航
      code: 'cxh_ms',
      label: Strings.getLang('long_life_tips'),
      type: 'Boolean',
      value: cxhMs,
    },
    {
      title: Strings.getLang('always_open_close'), // 常开
      code: 'ck_cb',
      // label: Strings.getLang('always_open_close_tips'),
      type: 'Select',
      value: Strings.getLang(`ck_${ckCb}`),
      option: [
        {
          label: Strings.getLang('ck_standard'),
          code: 'standard',
        },
        {
          label: Strings.getLang('ck_open'),
          code: 'open',
        },
        {
          label: Strings.getLang('ck_close'),
          code: 'close',
        },
      ],
    },
    {
      title: Strings.getLang('always_open_close_delay'), // 常开延时
      code: 'ckcb_ys',
      // label: Strings.getLang('always_open_close_delay_tips'),
      type: 'number',
      value: `${ckCbYs} S`,
    },
    {
      title: Strings.getLang('timing'), // 定时
      type: 'link',
      url: 'timer',
    },
    {
      title: Strings.getLang('factory_reset'), // 恢复出厂设置
      code: 'hf_cc',
      type: 'confirm',
      tips: Strings.getLang('factory_reset_tips'),
    },
  ];

  const handleJump = useThrottleFn(
    (code: string) => {
      router.push(`/${code}`);
    },
    { wait: 80 }
  ).run;

  return (
    <View className={styles.view}>
      <NavBarCustom name={Strings.getLang('setting')} back />

      <ScrollView scrollY refresherTriggered className={styles.scrollView}>
        <CellGroup customClass={styles.cellGroup}>
          {settingList.map(item => {
            return (
              <Cell
                key={item.code}
                title={item.title}
                // code={item.code}
                label={item.label}
                border={false}
                isLink={item.type !== 'Boolean'}
                value={typeof item.value !== 'string' ? '' : item.value}
                onClick={() => {
                  if (item.type === 'link') {
                    handleJump(item.url);
                  }
                  if (item.type === 'confirm') {
                    DialogInstance.confirm({
                      selector: '#smart-dialog2',
                      title: item.title,
                      message: item.tips,
                    })
                      .then(() => {
                        publishDps({
                          [item.code]: 'ok',
                        });
                      })
                      .catch(() => {
                        publishDps({
                          [item.code]: 'cancel',
                        });
                        DialogInstance.close();
                      });
                  }
                  if (item.type === 'Select') {
                    setCode(item.code);
                    setList(item.option);
                    setShow(true);
                    setTitle(item.title);
                  }

                  if (item.type === 'number') {
                    setShowNumber(true);
                    setCode(item.code);
                    setShowNumber(true);
                    setTitle(item.title);
                  }
                }}
              >
                {item.type === 'Boolean' ? (
                  <Switch
                    checked={item.value}
                    onChange={value => {
                      // actions[item.code].set(value);
                      publishDps({
                        [item.code]: !item.value,
                      });
                    }}
                    activeColor="#40a1a7"
                  />
                ) : null}
              </Cell>
            );
          })}
        </CellGroup>

        <BottomSheet show={show} title={title} onClose={onClose}>
          <ScrollView scrollY className={styles.bottomSheetScrollView}>
            {list.map(item => {
              const isSelected = item.code === props[code];
              return (
                <View
                  key={item.code}
                  onClick={() => {
                    publishDps({
                      [code]: item.code,
                    });
                    onClose();
                  }}
                  className={styles.option}
                >
                  <Text>{item.label}</Text>
                  {isSelected ? (
                    <Icon
                      name={Checkmark}
                      color="#43A939"
                      size="42rpx"
                      customClass={styles.checkmark}
                    />
                  ) : null}
                </View>
              );
            })}
          </ScrollView>
        </BottomSheet>

        <BottomSheet
          show={showNumber}
          title={title}
          onClose={() => {
            setShowNumber(false);
          }}
        >
          <View className={styles.stepperView}>
            <Stepper
              integer
              min={0}
              max={180}
              value={Number(props[code]) || 1}
              onChange={e => {
                publishDps({
                  [code]: e.detail,
                });
              }}
            />
          </View>
        </BottomSheet>
        <Dialog id="smart-dialog2" />
      </ScrollView>
    </View>
  );
}
